<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 收支核算 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="search-box">
                <el-form :inline="true">
                    <el-form-item label="起止时间">
                        <el-date-picker
                            v-model="searchSet.startTime"
                            clearable
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerTimeOptions"
                        >
                        </el-date-picker>
                        &nbsp; <label for="">~</label> &nbsp;
                        <el-date-picker
                            v-model="searchSet.endTime"
                            clearable
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerTimeOptions"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="科目" prop="type">
                        <el-select v-model="searchSet.subjectcode" class="formInput" placeholder="请选择科目" clearable>
                            <el-option v-for="item in typeDict" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                    <el-button type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
                </el-form>
            </div>


            <el-card class="SumCard" :body-style="{ padding: '10px 20px' }">
                <div class="FlexRowWarp">
                    <div class="FlexRowVCenter">
                        <div style="font-weight: bold">支出合计：</div>
                        <div v-for="(item, index) in outList" :key="index" class="SumItem FlexRowVCenter">
                            <i class="el-icon-money SumItemIcon"></i>
                            <div>
                                <div class="SumItemLabel">{{ item.currencyname }}</div>
                                <div>{{ item.totalAmount }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="FlexRowVCenter">
                        <div style="font-weight: bold; margin-left: 20px">收入合计：</div>
                        <div v-for="(item, index) in inList" :key="index" class="SumItem FlexRowVCenter">
                            <i class="el-icon-wallet SumItemIcon"></i>
                            <div>
                                <div class="SumItemLabel">{{ item.currencyname }}</div>
                                <div>{{ item.totalAmount }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="FlexRowVCenter">
                        <div style="font-weight: bold; margin-left: 20px">利润合计：</div>
                        <div v-for="(item, index) in profitList" :key="index" class="SumItem FlexRowVCenter">
                            <i class="el-icon-coin SumItemIcon"></i>
                            <div>
                                <div class="SumItemLabel">{{ item.currencyname }}</div>
                                <div>{{ item.totalAmount }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-table :data="tableData" v-loading="tableLoading" border class="table" ref="mainTable" :row-class-name="tableRowClassName">

                <el-table-column prop="currencyname" label="货币类型" align="center"></el-table-column>
                <el-table-column prop="amount" label="货币金额" align="center"></el-table-column>
                <el-table-column prop="addusername" label="经手人" align="center"></el-table-column>
                <el-table-column prop="addtime" label="添加时间" align="center"></el-table-column>
                <el-table-column prop="subjectName" label="科目" align="center"></el-table-column>
                <el-table-column prop="description" label="项目" align="center"></el-table-column>
                <el-table-column label="操作" min-width="70" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-s-order" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="sizes, total, prev, pager, next"
                    :current-page="query.index"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="query.pageSize"
                    :total="itemTotal"
                    @current-change="handlePageChange"
                    @size-change="handlePageSizeChange"
                ></el-pagination>
            </div>
        </div>
        <detailDialog :visible.sync="detailVisible" :data="detailInfo" :dataType="detailType"></detailDialog>
    </div>
</template>

<script>
import API from '../../../api/index'; //读入restfulAPI
import dataTable from './dataTable';
import detailDialog from '../../common/dialog/detailDialog.vue';
export default {
    name: 'repositoryTable',
    mixins: [dataTable],
    components: {
        detailDialog
    },
    data() {
        return {
            searchSet: {
                startTime: '',
                endTime: '',
                subjectcode: ''
            },
            typeDict: {
                100: { id: '100', name: '收入' },
                200: { id: '200', name: '代理商成本' },
                300: { id: '300', name: '运营成本' }
            },
            sumList: [],
            
            profitList: [],
            outList: [],
            inList: [],
            detailVisible: false,

            detailInfo: {},
            detailType: [
                {
                    attrs: { column: 2 },
                    list: [
                        { label: 'ID', key: 'id' },
                        { label: '添加时间', key: 'addtime' },
                        { label: '货币类型', key: 'currencyname' },
                        { label: '货币金额', key: 'amount' },
                        { label: '经手人', key: 'addusername' },
                        { label: '描述', key: 'description' },
                        { label: '科目', key: 'subjectName', span: 2 }
                    ]
                }
            ]
        };
    },
    created() {
        this.init();
    },
    methods: {
        //页面初始化
        init() {
            this.getData();
        },

        getData() {
            this.tableLoading = true;
            API.StandardDoWith(API.Profit.Get(this.getQuery()), this, {
                success: (detail) => {
                    this.itemTotal = detail.count;
                    this.tableData = detail.list;
                    
                    this.outList = detail.outList;
                    this.inList = detail.inList;
                    this.profitList = detail.profitList;
                },
                complete: () => {
                    this.tableLoading = false;
                }
            });
        },
        handleDetail(index, row) {
            let obj = Object.assign({}, row);
            this.detailInfo = obj;
            this.detailVisible = true;
        },
        handleExport() {
            this.$confirm('是否导出Excel数据?', '提示')
                .then(() => {
                    API.StandardDownFile(API.ProfitExport(), '收支核算数据.xlsx');
                })
                .catch((err) => {});
        },
        tableRowClassName({ row, rowIndex }) {
            if (row.direction == 1) {
                return 'success-row';
            } else if (row.direction == -1) {
                return 'warning-row';
            }
        }
    }
};
</script>

<style scoped>
@import '../../../assets/css/dataTable.css';
</style>
